<template>
  <div style="height: 100%">
    <el-row align="middle" style="height: 100%">
      <el-col :md="24" :lg="24" style="height: 100%">
        <div class="div-left" style="height: 100%">
          <div class="forgetpwd">
            <el-button type="text" style="float: right"><span style="color: #FFFFFF">忘记密码？</span></el-button>
          </div>

          <div class="center-body text-center">
            <div>
              <div>
                <span class="font35 " style="color: #ffffff">登录</span></div>
              <div class="block-input">
                <el-input v-model="pwd" placeholder="请输入密码" style="float: left "></el-input>
              </div>
              <div class="btn-login">
                <el-button class="login" @click="cancelLock">
                  <svg-icon icon-class="箭头" class="font26"
                  />
                </el-button>
              </div>
            </div>
          </div>

          <div class="left_img"></div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  export default {
    name: "block",
    data() {

      return {
        pwd: ""

      }
    },
    methods: {
      cancelLock() {
        //  验证密码
        this.$router.go(-1);//返回上一层
      }

    }
  }
</script>

<style>

  .block-input .el-input--medium .el-input__inner {
    border: hidden;
    background: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 15px;
    height: 50px;
  }
</style>
<style scoped>
  .forgetpwd {
    height: 10%;
    padding-top: 45px;
    padding-right: 50px;
  }

  .login {
    width: 64px;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    opacity: 1;
    margin-left: 13px;
    border-radius: 10px;
  }

  .btn-login {
    margin-top: 82px;
    float: right;

  }

  .block-input {
    float: left;
    width: 500px;
    height: 50px;
    border: 1px solid #FFFFFF;
    margin-top: 82px;
    border-radius: 10px;


  }

  .div-left {
    background: linear-gradient(180deg, #242348 0%, #5A55AA 100%);
    opacity: 1;

  }

  .left_img {


    width: 100%;
    height: 50%;
    background-image: url("../../../assets/images/blockbg.jpg");
    background-size: cover;
  }

  .center-body {
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
</style>
